<template>
  <el-table-column
    v-if="item.hide !== undefined ? !item.hide : true"
    :label="item.label"
    :prop="item.prop"
    :min-width="item.width ? item.width : '180px'"
    :sortable="item.sortable ? 'custom' : false"
    :show-overflow-tooltip="item.showOverflowTooltip !== undefined ? item.showOverflowTooltip : false"
  >
    <template #header v-if="item.headtooltip">
      {{ item.label }}
      <el-tooltip effect="dark" :content="item.tooltipContent" placement="top-start">
        <i class="el-icon-info"></i>
      </el-tooltip>
    </template>
    <template v-if="item.slotable" v-slot="{ row }">
      <slot :row="row" :name="item.prop"></slot>
    </template>
    <template v-else-if="item.isTime" v-slot="{ row }">
      {{ dayjs(row[item.prop]).format("YYYY-MM-DD HH:mm:ss") }}
    </template>
    <template v-else v-slot="{ row }">
      {{ row[item.prop] }}
    </template>
    
    <!-- 嵌套列支持 -->
    <TableColumn v-if="item.hasNest" v-for="cell in item.children" :key="cell.prop" :item="cell">
      <template v-if="cell.slotable" v-slot:[cell.prop]="{ row }">
        <slot :row="row" :name="cell.prop"></slot>
      </template>
    </TableColumn>
  </el-table-column>
</template>
<script lang="ts" setup>
import dayjs from "dayjs";

/**
 * @brief: TableColumn组件属性定义
 */
interface Props {
  item: any
}

/**
 * @brief: 组件属性，设置默认值
 */
const props = withDefaults(defineProps<Props>(), {
  item: () => ({})
})
</script>
